<template>
  <el-main>
    <!-- 查询条件 -->
    <el-form
      :model="searchModel"
      ref="searchForm"
      label-width="80px"
      :inline="true"
      size="small"
    >
      <el-form-item>
        <el-input
          clearable
          v-model="searchModel.dictName"
          placeholder="请输入字典名称"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchModel.status" placeholder="请选择字典状态">
          <el-option
            v-for="item in dict.type.sys_normal_disable"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search(pageNo, pageSize)"
          v-if="hasPermission('sys:dictType:select')"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh-right" @click="resetValue"
          >重置</el-button
        >
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="openAddWindow"
          v-if="hasPermission('sys:dictType:add')"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 数据表格 -->
    <el-table
      :data="dictTypeList"
      :height="tableHeight"
      border
      stripe
      style="width: 100%; margin-bottom: 10px"
    >
      <el-table-column
        prop="dictId"
        label="字典编号"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column prop="dictName" label="字典名称"></el-table-column>
      <el-table-column prop="dictType" label="字典类型">
        <template slot-scope="scope">
          <span class="link-type" @click="doView(scope.row.dictType)">{{
            scope.row.dictType
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_normal_disable"
            :value="scope.row.status"
          />
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" align="center" width="290">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            type="primary"
            size="small"
            @click="handleEdit(scope.row)"
            v-if="hasPermission('sys:dictType:edit')"
            >编辑
          </el-button>
          <el-button
            icon="el-icon-delete"
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
            v-if="hasPermission('sys:dictType:delete')"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页工具栏 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加和修改字典类型窗口 -->
    <system-dialog
      :title="dictTypeDialog.title"
      :visible="dictTypeDialog.visible"
      :width="dictTypeDialog.width"
      :height="dictTypeDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          :model="dictType"
          ref="dictTypeForm"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-form-item label="字典名称" prop="dictName">
            <el-input v-model="dictType.dictName"></el-input>
          </el-form-item>
          <el-form-item label="字典类型" prop="dictType">
            <el-input v-model="dictType.dictType"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="dictType.status">
              <el-radio :label="'0'">正常</el-radio>
              <el-radio :label="'1'">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <br />
          <el-form-item label="备注">
            <el-input
              type="textarea"
              v-model="dictType.remark"
              :rows="1"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
  </el-main>
</template>

<script>
//导入dict.js脚本
import dictApi from "@/api/dict";
//导入对话框组件
import SystemDialog from "@/components/system/SystemDialog.vue";
export default {
  name: "dictTypeList",
  dicts: ["sys_normal_disable"],
  //注册组件
  components: { SystemDialog },
  data() {
    return {
      status: [
        {
          value: "0",
          label: "正常",
        },
        {
          value: "1",
          label: "停用",
        },
      ],
      // 日期范围
      dateRange: [],
      //查询条件
      searchModel: {
        dictName: "",
        dictType: "",
        status: "",
        beginTime: "",
        endTime: "",
        pageNo: 1,
        pageSize: 10,
      },
      //添加和修改字典类型窗口属性
      dictTypeDialog: {
        title: "",
        visible: false,
        height: 150,
        width: 600,
      },
      rules: {
        dictName: [
          { required: true, trigger: "blur", message: "字典名称不能为空" },
        ],
        dictType: [
          { required: true, trigger: "blur", message: "字典类型不能为空" },
        ],
      },
      //对象
      dictType: {
        dictId: "",
        dictName: "",
        dictType: "",
        status: "",
        createBy: "",
        createTime: "",
        updateBy: "",
        updateTime: "",
        remark: "",
      },
      dictTypeList: [], //数据列表
      tableHeight: 0, //表格高度
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
    };
  },
  //初始化时调用
  created() {
    //调用查询字典类型列表的方法
    this.search();
  },
  //挂载后调用
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 220;
    });
  },
  methods: {
    /**
     * 页面跳转
     */
    doView(dictType) {
      this.$emit("fn", dictType);
    },
    /**
     * 分页查询字典类型列表
     */
    async search(pageNo = 1, pageSize = 10) {
      this.searchModel.pageNo = pageNo; //当前页码
      this.searchModel.pageSize = pageSize; //每页显示数量
      this.searchModel.beginTime =
        this.dateRange !== null ? this.dateRange[0] : "";
      this.searchModel.endTime =
        this.dateRange !== null ? this.dateRange[1] : "";
      //发送查询请求
      let res = await dictApi.getDictTypeListApi(
        this.searchModel,
        this.dateRange
      );
      //执行成功
      if (res.success) {
        //字典类型列表
        this.dictTypeList = res.data.records;
        //总数量
        this.total = res.data.total;
      }
    },
    /**
     * 当每页数量发生变化时触发该事件
     */
    handleSizeChange(size) {
      this.pageSize = size; //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /**
     * 当页码发生变化时触发该事件
     */
    handleCurrentChange(page) {
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    /**
     * 窗口事件
     */
    onClose() {
      this.dictTypeDialog.visible = false;
    },
    /**
     * 窗口确认事件
     */
    onConfirm() {
      //表单验证
      this.$refs.dictTypeForm.validate(async (valid) => {
        if (valid) {
          let res = null;
          //判断角色ID是否为空
          if (this.dictType.dictId === "") {
            //新增
            //发送添加请求
            res = await dictApi.addDictType(this.dictType);
          } else {
            //发送修改请求
            res = await dictApi.updateDictType(this.dictType);
          }
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message);
            //刷新
            this.search(this.pageNo, this.pageSize);
            //关闭窗口
            this.dictTypeDialog.visible = false;
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
    /**
     * 重置查询条件
     */
    resetValue() {
      //清空查询条件
      this.$resetForm("searchForm", this.searchModel);
      this.dateRange = [];
      //重新查询
      this.search();
    },
    /**
     * 打开添加窗口
     */
    openAddWindow() {
      //清空表单数据
      this.$resetForm("dictTypeForm", this.dictType);
      this.dictTypeDialog.title = "新增字典类型"; //设置窗口标题
      this.dictTypeDialog.visible = true; //显示窗口
    },
    /**
     * 打开编辑窗口
     */
    handleEdit(row) {
      //数据回显
      this.$objCopy(row, this.dictType); //将当前编辑的数据复制到role对象中
      //设置窗口标题
      this.dictTypeDialog.title = "编辑字典类型";
      //显示编辑字典类型窗口
      this.dictTypeDialog.visible = true;
    },
    /**
     * 删除字典类型
     */
    async handleDelete(row) {
      //查询字典类型下是否有子表
      let result = await dictApi.checkDictType({ dictType: row.dictType });
      //判断是否可以删除
      if (!result.success) {
        //提示不能删除
        this.$message.warning(result.message);
      } else {
        //确认是否删除
        let confirm = await this.$myconfirm("确定要删除该数据吗?");
        if (confirm) {
          //发送删除请求
          let res = await dictApi.deleteDictType({ id: row.dictId });
          //判断是否成功
          if (res.success) {
            //成功提示
            this.$message.success(res.message);
            //刷新
            this.search(this.pageNo, this.pageSize);
          } else {
            //失败提示
            this.$message.error(res.message);
          }
        }
      }
    },
  },
};
</script>

<style></style>
